【js】 DOM常见的操作方式有哪些?

分享人:张雪飞

目录

1.背景介绍

2.知识剖析

3.常见问题

4.解决方案

5.编码实战

6.扩展思考

7.参考文献

8.更多讨论

1.背景介绍

DOM是什么?

DOM 是 Document Object Model(文档对象模型)的缩写。

DOM是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容、结构和样式。

在 HTML DOM中,所有事物都是节点。DOM 是被视为节点树的 HTML。

2.知识剖析

什么是DOM节点?

HTML 文档中的所有内容都是节点

整个文档是一个文档节点

每个 HTML 元素是元素节点

HTML 元素内的文本是文本节点

每个 HTML 属性是属性节点

注释是注释节点

常见问题

常见的DOM操作有哪些?

querySelector() 方法

querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。 注意: querySelector() 方法仅仅返回匹配指定选择器的第一个元素。 如果你需要返回所有的元素,请使用 querySelectorAll() 方法替代。

document.querySelector("#demo");

http://www.runoob.com/jsref/met-document-queryselector.html

4.解决方案

http://www.runoob.com/jsref/dom-obj-document.html

getElementsByTagName() 方法

getElementsByTagName() 方法可返回带有指定标签名的对象的集合。

getElementsByTagName() 方法返回元素的顺序是它们在文档中的顺序。

传递给 getElementsByTagName() 方法的字符串可以不区分大小写。

getElementsByClassName() 方法

获取所有指定类名的元素:

getElementsByClassName() 方法返回文档中所有指定类名的元素集合,作为 NodeList 对象。

NodeList 对象代表一个有顺序的节点列表。NodeList 对象 我们可通过节点列表中的节点索引号来访问列表中的节点(索引号由0开始)。

可以使用 NodeList 对象的 length 属性来确定指定类名的元素个数,并循环各个元素来获取你需要的那个元素。

getElementById() 方法

getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用。

如果您需要查找文档中的一个特定的元素,最有效的方法是 getElementById()。

在操作文档的一个特定的元素时,最好给该元素一个 id 属性,为它指定一个(在文档中)唯一的名称,然后就可以用该 ID 查找想要的元素。

5.编码实战

6.更多讨论

常见的DOM - 事件又哪些?

onclick 事件——当用户点击时

onload 事件——用户进入

onunload 事件——用户离开

onmouseover事件——鼠标移入

onmouseout事件——鼠标移出

onmousedown事件——鼠标按下

onmouseup 事件——鼠标抬起

7.参考文献

1.HTML DOM Document 对象

2.JavaScript HTML DOM 事件

鸣谢

感谢大家观看

BY :李仁